<template>
  <ClDialog v-bind="$attrs" :title="getTitle" width="1390px">
    <ClBar :loading="loaded" bar-height="400px">
      <ClForm ref="formRef" label-width="150px" :form-item="formItem">
        <template #select-header>
          <el-checkbox v-model="checkAll" class="ml-3" :indeterminate="indeterminate" @change="handleCheckAll">
            全选
          </el-checkbox>
        </template>
      </ClForm>
    </ClBar>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('atClose')">取消</el-button>
        <el-button type="primary" @click="onSure">确定</el-button>
      </span>
    </template>
  </ClDialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { FORM_ITEM } from './data'
import { judgesInfoAdd, judgesInfoView, projectItemInfoList } from '@/api/judgesInfo'
const formItem = ref(cloneDeep(FORM_ITEM))
const formRef = ref()
onMounted(async () => {
  init()
})
// 全选
const checkAll = ref(false)
// 半选
const indeterminate = ref(false)
// 评审范围
watch(
  formItem,
  (item) => {
    const val = item[5]?.value
    if (val.length === 0) {
      checkAll.value = false
      indeterminate.value = false
    } else if (val.length === scopeListApi.value.length) {
      checkAll.value = true
      indeterminate.value = false
    } else {
      indeterminate.value = true
    }
  },
  {
    deep: true,
    immediate: true
  }
)
const handleCheckAll = (val) => {
  indeterminate.value = false
  if (val) {
    formItem.value[5].value = scopeListApi.value.map((_) => _.key)
  } else {
    formItem.value[5].value = []
  }
}
const loaded = ref(false)
const scopeListApi = ref<any>([])
const init = async () => {
  try {
    loaded.value = false
    const scopeOfReview: any = await projectItemInfoList()

    scopeListApi.value = scopeOfReview.map((item) => ({
      key: item.itemId,
      value: item.itemName
    }))
    const scopeListApiIds = scopeOfReview.map((item) => item.itemId)
    formItem.value.forEach((item) => {
      if (item.key === 'scopeList') {
        item.elementConfig.options = scopeListApi.value
      }
    })
    if (props.info.id) {
      const res = await judgesInfoView({ id: props.info.id })
      formItem.value.forEach((item) => {
        item.value = res[item.key]
        if (item.key === 'scopeList') {
          const flag = res[item.key].length === scopeListApi.value.length
          indeterminate.value = !flag
          checkAll.value = flag
        }
      })
    } else {
      formItem.value.forEach((item) => {
        if (item.key === 'scopeList') {
          // 评审范围 默认全选
          item.value = scopeListApiIds
          indeterminate.value = false
          checkAll.value = true
        }
      })
    }
    loaded.value = true
  } catch (error) {
    loaded.value = true
  }
}
const api = async (res) => {
  await judgesInfoAdd({ ...res, id: props.info.id })
  emit('atClose', 'refresh-table')
}
const onSure = async () => {
  formRef.value.onsubmit(api)
}
onMounted(() => {})

const getTitle = computed(() => {
  return props.type
})

interface infoType {
  [props: string]: any
}
const props = defineProps<{ info: infoType; type: string }>()

const emit = defineEmits<{
  (e: 'atClose', str?: string | undefined): void
}>()
</script>

<style scoped lang="scss"></style>
